<template>
  <div class="shoukuanpeizhi">
    <top></top>
    <div class="flex zhiboxitong_content">
      <div class="left">
        <left></left>
      </div>
      <div class="right">
        <div class="zhiboxitong_right">
          <div style="margin: 30px 0 30px 20px;font-size: 20px;font-weight:bold;">投诉与反馈</div>
          <div class="flex input_container">
            <div class="flexc">
              <div>
                <div style="width: 75px;text-align: right;margin-bottom:10px;margin-left:10px">投诉类型</div>
                <el-select v-model="searchform.type" placeholder="选择投诉类型" clearable style="margin-left:20px">
                  <el-option label="投诉商家" value="投诉商家"></el-option>
                  <el-option label="交易投诉" value="交易投诉"></el-option>
                  <el-option label="使用体验不佳" value="使用体验不佳"></el-option>
                  <el-option label="咨询与建议" value="咨询与建议"></el-option>
                  <el-option label="功能异常" value="功能异常"></el-option>
                  <el-option label="无法支付" value="无法支付"></el-option>
                  <el-option label="无退款入口" value="无退款入口"></el-option>
                  <el-option label="商品或内容质量差" value="商品或内容质量差"></el-option>
                  <el-option label="商家未按约定提供服务" value="商家未按约定提供服务"></el-option>
                  <el-option label="投诉客服服务态度差" value="投诉客服服务态度差"></el-option>
                  <el-option label="资费/套餐不符" value="资费/套餐不符"></el-option>
                  <el-option label="运营商不符" value="运营商不符"></el-option>
                  <el-option label="其他问题" value="其他问题"></el-option>
                </el-select>
              </div>

              <div style="margin-right: 60px;">
                <div style="width: 75px;text-align: right;margin-bottom:10px;margin-left:10px;">手机号</div>

                <el-input v-model="searchform.mobile" placeholder="请输入手机号" style="margin-left:30px;"></el-input>
              </div>


              <div>
                <div style="width: 75px;text-align: right;margin-bottom:10px;margin-left:10px">时间选择</div>

                <el-date-picker v-model="times" clearable @change="changetime" value-format="yyyy-MM-dd"
                  type="daterange" range-separator="至" start-placeholder="开始日期"
                  end-placeholder="结束日期"></el-date-picker>
              </div>



              <el-button type="danger" size="medium" @click="search"
                style="background:#F72C50;border:none;margin:30px 0 0 50px;height:40px" round
                icon="el-icon-search">搜索</el-button>

              <el-button size="medium" @click="daochu()" style="margin:30px 0 0 30px;height:40px" round>导出明细</el-button>
            </div>

          </div>

          <div class="zhiboxitong_table">
            <div class="flexc tabs_container">
              <div @click="choosetab(1)" class="t_tab " :class="{'t_tab_lei':nowtab==1}" style="font-size:20px">待解决
                <div :class="{ t_under_line_lei:nowtab==1}"></div>
              </div>
              <div @click="choosetab(2)" class="t_tab" :class="{'t_tab_lei':nowtab==2}" style="font-size:20px">全部
                <div :class="{ t_under_line_lei:nowtab==2}"></div>
              </div>
              <div @click="choosetab(3)" class="t_tab" :class="{'t_tab_lei':nowtab==3}" style="font-size:20px">已解决
                <div :class="{ t_under_line_lei:nowtab==3}"></div>
              </div>
            </div>
            <div class="table_container">
              <el-table :header-cell-style="{fontSize: '14px', backgroundColor: '#F8F9FD', }"
                :cell-style="{fontSize: '14px', backgroundColor: '#F8F9FD' }" :data="tableData" style="width: 100%">
                <el-table-column label="来源" align="left">
                  <template slot-scope="scope">
                    <!-- <span v-if="scope.row.app_id.slice(0, 2)=='tt'">抖音小程序</span>
                    <span v-else>微信小程序</span> -->
                    {{scope.row.complain_source}}
                  </template>
                </el-table-column>
                <el-table-column width="240" prop="order_id" label="订单ID" align="left">
                </el-table-column>
                <el-table-column prop="date" label="图片" align="left">
                  <template slot-scope="scope">
                    <div class="ck_btn">
                      <img src="../assets/img/imgCk.png" alt="" />
                      <span style="color:#4B5FFC;font-size:14px" @click="check_img(scope.row.img)">查看</span>
                    </div>
                    <!-- <img :src="scope.row.img" @click="check_img(scope.row.img)" alt=""> -->
                  </template>
                </el-table-column>
                <el-table-column prop="mobile" label="手机号" align="left">
                </el-table-column>
                <el-table-column prop="created_at" label="创建时间" align="left">
                </el-table-column>
                <el-table-column label="等待时长" align="left">
                  <template slot-scope="scope">
                    {{timediff(scope.row.created_at)}}
                  </template>
                </el-table-column>
                <el-table-column prop="type" label="投诉类型" align="left">
                </el-table-column>
                <el-table-column prop="status" label="处理状态" align="left">
                  <template slot-scope="scope">
                    <div v-if="scope.row.status == 0">未处理</div>
                    <div v-if="scope.row.status == 1">处理完成</div>
                    <div v-if="scope.row.status == 2">已联系未处理</div>
                  </template>
                </el-table-column>
                <el-table-column prop="user_name" label="处理人" align="left">
                </el-table-column>
                <el-table-column label="操作" align="left">
                  <template slot-scope="scope">
                    <el-button style="color:#005AFF;font-size:14px" v-if="!scope.row.user_name" size="mini" type="text"
                      @click="chuli(scope.row.id,scope.row.app_id.slice(0, 2))">处理</el-button>
                    <el-button style="color:#005AFF;font-size:14px" v-if="scope.row.user_name" size="mini" type="text"
                      @click="chuli(scope.row.id,scope.row.app_id.slice(0, 2))">查看</el-button>
                      <el-button type="text" size="mini" @click="chuangjiantousu(scope.row)"  style="color:#005AFF;font-size:14px">创建工单</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <div style="text-align: right; padding: 10px 0;background:rgba(246,247,252,0.9);">
              <el-pagination background layout="total,prev, pager, next" :page-size="searchform.page_size"
                @current-change="fanye" :total="total">
              </el-pagination>
            </div>
          </div>



        </div>
      </div>
    </div>

    <el-dialog title="查看图片" :visible.sync="isshowimg" width="500px">
      <img :src="imgurl" alt="">
    </el-dialog>
    <tousuwindow ref="tousuwindow" v-if="relo" @guanbi="guanbi" :all="all" />
  </div>
</template>

<script>
  import axios from "axios";
  import top from "./components/top.vue";
  import left from "./components/left.vue";
  import moment from 'moment'
  import tousuwindow from "@/zhiboxitong/components/tousuwindow.vue";
  export default {
    components: {
      top,
      left,tousuwindow
    },
    name: "tousu",
    data() {
      return {
        relo:false,
        tousuid:"",
        times: [],
        tableData: [],
        nowtab: 1,
        searchform: {
          status: 0,
          page: 1,
          page_size: 20,
          type: '',
          mobile: '',
          start: '',
          end: ''
        },
        total: 0,
        isshowimg: false,
        imgurl: '',
        all:""
      }
    },
    created() {
      this.getlist()
    },
    mounted() {

    },
    methods: {
      guanbi:function(){
        this.getlist()
        this.relo = false
      },
      chuangjiantousu:function(item){
        this.all = JSON.parse(JSON.stringify(item))
        this.relo = false
        this.relo = true
        this.$nextTick(()=>{


          this.$refs.tousuwindow.chushihua()
        })
      },
      changetime: function() {
        if (this.times == "" || this.times == null) {
          this.searchform.start = "";
          this.searchform.end = "";
        } else {
          this.searchform.start = this.times[0];
          this.searchform.end = this.times[1];
        }
      },
      daochu: function() {
        axios.get(`${this.apis}/api/mini/order/complain/export`, {
            params: this.searchform
          })
          .then(response => {
            if (response.data.msg.code == 0) {
              window.location.href = location.origin + '/' + response.data.data.path

            } else {
              this.$message.error(response.data.msg.info);
            }
          });

      },
      search() {
        this.searchform.page = 1
        this.getlist()
      },
      getlist() {
        axios.get(`${this.apis}/api/mini/order/complain/list`, {
            params: this.searchform
          })
          .then(response => {
            if (response.data.msg.code == 0) {
              console.log('列表')
              console.log(response)
              this.tableData = response.data.data.data
              this.total = response.data.data.total
            } else {
              this.$message.error(response.data.msg.info);
            }
          });
      },
      chuli(id, type) {
        this.$router.push({
          path: "/zhiboxitong/chuli",
          query: {
            id: id,
            type: type
          }
        })
      },
      //切换tab
      choosetab(i) {
        this.nowtab = i
        if (i == 1) {
          this.searchform.status = 0
        }
        if (i == 2) {
          this.searchform.status = ''
        }
        if (i == 3) {
          this.searchform.status = 1
        }
        this.searchform.page = 1
        this.getlist()
      },
      fanye: function(page) {
        this.searchform.page = page
        this.getlist()
      },

      check_img(url) {
        this.imgurl = url
        this.isshowimg = true
      },
      timediff(begin_time) {

        // var begin_time = '2020-01-01 12:00:00'
        var end_time = this.getCurrentTime()


        //年月日时分秒转换为时间戳
        let beginTime = (new Date(begin_time).getTime()) / 1000;
        let endTime = (new Date(end_time).getTime()) / 1000;
        var starttime = ''
        var endtime = ''
        if (beginTime < endTime) {
          starttime = beginTime;
          endtime = endTime;
        } else {
          starttime = endTime;
          endtime = beginTime;
        }
        //计算天数
        var timediff = endtime - starttime;
        var days = parseInt(timediff / 86400);
        //计算小时数
        var remain = timediff % 86400;
        var hours = parseInt(remain / 3600);
        //计算分钟数
        var remain = remain % 3600;
        var mins = parseInt(remain / 60);

        var res = days + '天' + hours + '小时' + mins + '分';
        console.log(res)
        //返回 3天4小时30分
        return res;
      },
      //中国标准时间转化
      getCurrentTime() {
        let date = new Date()
        var year = date.getFullYear() //返回指定日期的年份
        var month = this.repair(date.getMonth() + 1); //月
        var day = this.repair(date.getDate()); //日
        var hour = this.repair(date.getHours()); //时
        var minute = this.repair(date.getMinutes()); //分
        var second = this.repair(date.getSeconds()); //秒

        //当前时间
        var curTime = year + "-" + month + "-" + day +
          " " + hour + ":" + minute + ":" + second;
        console.log(curTime)
        //返回 2022-11-25 11:23:26
        return curTime;
      },
      //补0
      repair(i) {
        if (i >= 0 && i <= 9) {
          return "0" + i;
        } else {
          return i;
        }
      },

    }
  }
</script>
<style scoped lang="less">
  .table_container {
    padding: 20px 30px 0 30px;
    background: #FAFAFE;
    border-top-left-radius: 30px;
  }

  //去掉每行的下边框
  /deep/ .el-table td.el-table__cell,
  /deep/ .el-table th.el-table__cell.is-leaf {
    border-bottom: none;
    border-right: none;
  }

  // 去掉表格单元格边框
  .customer-table th {
    border: none;
  }

  .customer-table td,
  .customer-table th.is-leaf {
    border: none;
  }

  // 表格最外边框
  .el-table--border,
  .el-table--group {
    border: none;
  }

  // 头部边框
  .customer-table thead tr th.is-leaf {
    border: 1px solid #EBEEF5;
    border-right: none;
  }

  .customer-table thead tr th:nth-last-of-type(2) {
    border-right: 1px solid #EBEEF5;

  }

  // 表格最外层边框-底部边框
  .el-table--border::after,
  .el-table--group::after {
    width: 0;
  }

  .customer-table::before {
    width: 0;
  }

  /deep/ .el-table__body td {
    height: 72px;
    //  margin-top: 10px;
  }

  .customer-table .el-table__fixed-right::before,
  .el-table__fixed::before {
    width: 0;
  }

  // 表格有滚动时表格头边框
  .el-table--border th.gutter:last-of-type {
    border: 1px solid #EBEEF5;
    border-left: none;

  }

  // 去除边框线
  /deep/ .el-table::before {
    height: 0;
  }

  /deep/ .el-table__header th {
    &:first-child {
      //  border-top-left-radius: 50px;
    }
  }

  // 划过改变table表格背景颜色
  /deep/ .el-table__body tr:hover>td {
    background-color: white !important;
  }

  /deep/ .el-input__inner {
    // border: none;
    border-radius: 15px;
  }

  .input_container {
    width: 100%;
    height: 100px;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    background: #F8F9FD;
    padding: 0 20px;
    box-sizing: border-box;
  }

  .zhiboxitong_table {
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    /* padding:10px 20px; */
  }

  .t_under_line_lei {
    width: 30px;
    height: 5px;
    background-color: #005aff;
    margin-top: 6px;
    border-radius: 10px;
  }

  // .t_tab{
  //   font-size: 18px;
  //   margin-right: 30px;
  //   color: #272F53;
  //   margin-top: 30px;
  //   margin-bottom: 10px;

  //   padding-bottom: 4px;
  //   border-bottom: 2px solid white;

  // }
  .t_tab_lei {
    display: flex;
    color: #335DFF;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
</style>
<style scoped lang="less">
  .shoukuanpeizhi {
    // background: #f2f2f2;
    min-height: 100vh;

    * {
      box-sizing: border-box;
    }

    .zhiboxitong_content {
      height: calc(100vh - 70px);

      .left {
        width: 210px;
        background: #FAFAFE;
        height: 100%;
      }

      .right {
        width: calc(100vw - 220px);
        overflow: auto;
        height: 100vh;

        .zhiboxitong_right {
          height: calc(100vh - 90px);
          background: #fff;
          border-radius: 5px;
          padding: 15px 0 15px 20px;

        }

      }
    }
  }

  /deep/ .el-table__body tr:hover td {
    background-color: white !important;
  }

  /deep/ .el-table {
    background-color: #F8F9FD;
  }

  /deep/ .el-table__body tr td:first-child {
    border-radius: 20px 0 0 20px;
    padding-left: 10px;
    box-sizing: border-box;
  }

  /deep/ .el-table__body tr td:last-child {
    border-radius: 0 20px 20px 0;
  }

  .tabs_container {
    margin: 30px 0 20px 0;
    font-size: 20px;
    font-weight: bold;
    display: flex;
    cursor: pointer;
    align-items: center;
    width: 400px;
    justify-content: space-around;
  }

  .ck_btn {
    display: flex;
    justify-content: flex-start;
    cursor: pointer;

    img {
      width: 20px;
      margin-right: 8px;
      height: 20px;
    }
  }

  /deep/ .el-dialog {
    border-radius: 20px;
  }

  /deep/ .el-dialog__title {
    font-size: 20px;
    font-weight: bold;
    /* 修改标题字体大小 */
  }

  /deep/ .el-pagination .el-pager li {
    border-radius: 12px;
    /* 设置圆角大小 */
    background: white;

  }
</style>
